<template>
  <div>
    <el-form
      :rules="rules"
      ref="loginForm"
      :model="loginForm"
      class="loginContainer"
    >
      <el-form-item>
        <h3 class="loginTitle">登 录</h3>
      </el-form-item>

      <el-form-item prop="account">
        <el-input
          type="text"
          auto-complete="false"
          v-model="loginForm.account"
          placeholder="请输入用户名"
          clearable
        ></el-input>
      </el-form-item>

      <el-form-item prop="password">
        <el-input
          type="password"
          auto-complete="false"
          v-model="loginForm.password"
          placeholder="请输入密码"
          show-password
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" style="width: 48%" @click="submitLogin()">
          登 录
        </el-button>
        <el-button type="success" style="width: 49%" @click="goRegiest()">
          注 册
        </el-button>
      </el-form-item>
    </el-form>

    <el-dialog title="注册" :visible.sync="dialogVisible" center width="30%">
      <div
        style="
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        "
      >
        <el-form :inline="true" label-width="100px">
          <el-form-item label="账号">
            <el-input v-model="form.account" placeholder="请输入账号">
            </el-input>
          </el-form-item>

          <el-form-item label="密码">
            <el-input v-model="form.password" placeholder="请输入密码">
            </el-input>
          </el-form-item>

          <el-form-item label="权限">
            <el-radio v-model="form.status" label="3">普通用户</el-radio>
            <el-radio v-model="form.status" label="2">企业用户</el-radio>
          </el-form-item>
        </el-form>
        <!-- <p style="color: #f00">提示: 请输入你的个人信息</p> -->
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="regiter()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      dialogVisible: false,

      form: {
        account: "",
        password: "",
        status: "3",
      },

      loginForm: {
        account: "",
        password: "",
      },
      checked: false,
      rules: {
        account: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    regiter() {
      this.$axios.post("/saveUser", this.form).then((res) => {
        if (res.data.msg == "注册成功！") {
          // this.dialogVisible = false;
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: "warning",
          });
        } else {
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: "warning",
          });
        }
      });
    },
    goRegiest() {
      this.dialogVisible = true; //显示弹窗
    },
    submitLogin() {
      const _this = this;
      this.$axios.post("/login", this.loginForm).then((res) => {
        // 共享登录信息
        const jwt = res.headers["authorization"];
        const userinfo = res.data.data;

        _this.$store.commit("SET_TOKEN", jwt);
        _this.$store.commit("SET_USERINFO", userinfo);

        // 获取登录的用户身份
        const status = res.data.data.status;

        // 判断用户的身份，跳转相应的界面
        if (status == 1) {
          // 管理员登录，跳转管理员后台页面
          _this.$router.push("/admin/home");
        } else if (status == 2) {
          // 企业用户登录，跳转企业用户后台管理页面
          _this.$router.push("/company/home");
        } else {
          // 普通用户登录，跳转前台页面
          this.studentInfo();
        }
      });
    },
    studentInfo() {
      const _this = this;
      const id = _this.$store.getters.getUser.id;
      console.log(id);
      this.$axios.get("/student/" + id).then((res) => {
        const student = res.data.data;
        // 保存用户信息
        _this.$store.commit("SET_STUDENT", student);
        _this.$router.push("/userHome");
      });
    },
  },
};
</script>

<style scoped>
.loginContainer {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 180px auto;
  width: 350px;
  padding: 15px 30px 15px 30px;
  background-color: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
.loginTitle {
  margin: 0px auto 40px auto;
  text-align: center;
}
.loginRemember {
  text-align: left;
  margin: 0px 0px 15px 0px;
}
.el-form-item__content {
  display: flex;
  align-items: center;
}
</style>
